<template>
	<div id="ZhuZhuangTu04"></div>
</template>

<script setup>
import {onMounted} from 'vue'
import {Column} from '@antv/g2plot'

const data = [
	{
		country: 'Asia',
		year: '1750',
		value: 502
	},
	{
		country: 'Asia',
		year: '1800',
		value: 635
	},
	{
		country: 'Asia',
		year: '1850',
		value: 809
	},
	{
		country: 'Asia',
		year: '1900',
		value: 947
	},
	{
		country: 'Asia',
		year: '1950',
		value: 1402
	},
	{
		country: 'Asia',
		year: '1999',
		value: 3634
	},
	{
		country: 'Asia',
		year: '2050',
		value: 5268
	},
	{
		country: 'Africa',
		year: '1750',
		value: 106
	},
	{
		country: 'Africa',
		year: '1800',
		value: 107
	},
	{
		country: 'Africa',
		year: '1850',
		value: 111
	},
	{
		country: 'Africa',
		year: '1900',
		value: 133
	},
	{
		country: 'Africa',
		year: '1950',
		value: 221
	},
	{
		country: 'Africa',
		year: '1999',
		value: 767
	},
	{
		country: 'Africa',
		year: '2050',
		value: 1766
	},
	{
		country: 'Europe',
		year: '1750',
		value: 163
	},
	{
		country: 'Europe',
		year: '1800',
		value: 203
	},
	{
		country: 'Europe',
		year: '1850',
		value: 276
	},
	{
		country: 'Europe',
		year: '1900',
		value: 408
	},
	{
		country: 'Europe',
		year: '1950',
		value: 547
	},
	{
		country: 'Europe',
		year: '1999',
		value: 729
	},
	{
		country: 'Europe',
		year: '2050',
		value: 628
	}
]

onMounted(() => {
	const columnPlot = new Column('ZhuZhuangTu04', {
		data,
		xField: 'year',
		yField: 'value',
		seriesField: 'country',
		isPercent: true,
		isStack: true,
		label: {
			position: 'middle',
			content: (item) => {
				return item.value.toFixed(2)
			},
			style: {
				fill: '#fff'
			}
		}
	})

	columnPlot.render()
})
</script>
